<template>
    <div>
        <!-- 顶部表单 -->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="仓库">
                            <el-input v-model="formInline.ware_name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="仓库状态">
                            <el-select v-model="formInline.ware_state" placeholder="请选择">
                                <el-option label="启用" value="1"></el-option>
                                <el-option label="停用" value="0"></el-option>
                                <el-option label="锁定" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="仓库主管">
                            <el-input v-model="formInline.ware_duty_man" placeholder="请选择">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false"
                                @click="cz()">重置</el-button>
                            <el-button class="custom-button" @click="fill()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div style="margin-bottom: 10px;">
                        <el-button class="custom-button" @click="goToAddBsItem">新增</el-button>
                        <el-button class="custom-button2" @click="onSubmit">删除</el-button>
                        <el-button class="custom-button2" @click="drawer = true">复制</el-button>
                        <el-button class="custom-button2" @mouseover="hover = true" @mouseout="hover = false"
                            @click="onSubmit">导出</el-button>
                        <el-button class="custom-button2" @click="onSubmit">导入</el-button>
                        <el-button class="custom-button2" @click="drawer = true">刷新</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-card class="box-card">
            <!-- 数据表格与按钮 -->
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <!-- 左边固定 -->
                <el-table-column fixed type="selection" width="55">
                </el-table-column>
                <el-table-column fixed prop="id" label="序号"  align="center">
                </el-table-column>
                <el-table-column fixed prop="ware_code" label="仓库编号"  align="center">
                    <template slot-scope="scope">
                        <router-link :to="{ name: 'Warehouse_information', params: { ware_code: scope.row.ware_code } }">
                            <span>
                                {{ scope.row.ware_code }}
                            </span>
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="ware_name" label="仓库名称"  align="center">
                </el-table-column>
                <el-table-column fixed prop="ware_cap" label="仓库容量/m³"  align="center">
                </el-table-column>
                <el-table-column fixed prop="ware_state" label="状态"  align="center">
                    <template slot-scope="scope">
                        <el-tag type="danger" effect="dark" v-if="scope.row.ware_state == 0">停用
                        </el-tag>
                        <el-tag type="primary" effect="dark" v-if="scope.row.ware_state == 1">启用
                        </el-tag>
                        <el-tag type="danger" effect="dark" v-if="scope.row.ware_state==2">已锁定
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed prop="ware_adr" label="仓库地址" align="center">
                </el-table-column>
                <el-table-column fixed prop="ware_duty_man" label="仓库主管" align="center">
                </el-table-column>
                <el-table-column fixed prop="area_count" label="库位数量" align="center">
                </el-table-column>
                <el-table-column fixed prop="create_by" label="操作人" align="center">
                </el-table-column>
                <el-table-column fixed prop="create_time" label="操作时间"  align="center">
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" width="110px" align="center">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="Delect(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
    </el-card>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="rows">
        </el-pagination>
    </div>
</template>

<script>
import $http from '../http/base.js'
export default {
    data() {
        return {
            labelPosition: 'right',
            currentPage: 1,
            rows: 1,
            pageSize: 3,
            drawer: false,
            direction: 'rtl',
            formInline: {
                ware_code: '',//编号
                ware_name: '',//名称
                ware_duty_man: '',//仓库主管
                ware_state: ''//仓库状态
            },
            value1: '',
            value2: '',
            tableData: [],
            multipleSelection: []
        }
    },
    mounted() {
        this.fill();
        this.currentPage = 1;
    },
    computed: {
    },
    methods: {
        fill() {
            var tj = "1=1";
            //模糊查询
            if (this.formInline.item_code != "") {
                tj +=
                    " and ware_code like concat('%',concat('" + this.formInline.ware_code + "','%')) or ware_name like concat('%',concat('" + this.formInline.ware_name + "','%'))";
            }
            if (this.formInline.inbill_state != "") {
                tj +=
                    " and ware_duty_man like concat('%',concat('" + this.formInline.ware_duty_man + "','%'))";
            }
            if (this.formInline.item_type != "") {
                tj +=
                    " and ware_state like concat('%',concat('" + this.formInline.ware_state + "','%'))";
            }
            const token = localStorage.getItem('token');
            $http.post("https://localhost:7020/api/bs_warehouseControllers/bs_Item_FenYe?pageSize=" + this.pageSize + "&currentPage=" + this.currentPage + "&str=" + tj + "")
                .then((res) => {
                    console.log(res.list);
                    this.tableData = res.list;
                    this.rows = res.count;
                }).catch((err) => {
                    alert('错误')
                    console.log(err);
                });
        },
        onSubmit() {
            console.log('submit!');
        },
        cz() {
            this.formInline.ware_state = "";
            this.formInline.ware_code = "";
            this.formInline.ware_name = "";
            this.formInline.unit = "";
        },
        goToAddBsItem() {
            this.$router.push('/AddWarehouse');
        },
        handleClose(done) {//关闭
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        //表格选择功能
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {//固定列表
            this.multipleSelection = val;
            console.log(val);
        }, 
        xg(row) {//编辑
            console.log(row);
            this.$router.push({ name: 'UpaProduct_information', params: { id: row.id } })
        },
        handleSizeChange(pageSize) {//分页
            this.pageSize = pageSize;
            this.currentPage = 1;
            console.log(this.pageSize);
            this.fill();
        },
        handleCurrentChange(currentPage) {//分页
            this.currentPage = currentPage;
            console.log(this.currentPage);
            this.fill();
        }, Delect(row) {//逻辑删除is_del=0
            $http.post("https://localhost:7020/api/bs_warehouseControllers/ItemUDelect?id= " + row.id)
                .then((res) => {
                    console.log("供应商逻辑删除返回数据:" + res);
                    alert("删除成功！");
                    this.fill();
                })
        }
    },
}
</script>

<style scoped>
/* 按钮主题颜色 */
.custom-button {
    border: #545C64;
    background-color: #545C64;
    /* 背景色 */
    color: white;
    /* 文本颜色 */
    transition: background-color 0.3s;
    /* 过渡时间可根据需要调整 */
    /* 其他样式属性 */
}

.custom-button:hover {
    border: #545C64;
    background-color: #79828a;
    /* 背景色 */
    color: white;
    /* 文本颜色 */
    /* 其他样式属性 */
}

.custom-button:focus {
    border: #545C64;
    background-color: #79828a;
    /* 背景色 */
    color: white;
    /* 文本颜色 */
    /* 其他样式属性 */
}

.custom-hr {
    border: none;
    border-top: dotted 1px;
    color: gray;
    background-color: gray;
    height: 1px;
}

.custom-button2 {
    background-color: #fff;
    color: #545C64;
    border: #545C64;
}

.custom-button2:hover {
    color: #fff;
    background-color: #79828a;
    border: #545C64;
}

.custom-button2:focus {
    color: #79828a;
    background-color: white;
}

.Selected {
    display: inline-block;
}

.SInput {
    width: 190px;
}

.demo-form-inline2 {
    margin-top: 50px;
    line-height: 40px;
}
</style>